<!DOCTYPE html>
<html class="x-admin-sm">
    <head>
        <meta charset="UTF-8">
        <title>公告管理</title>
        <meta name="renderer" content="webkit">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <meta name="viewport" content="width=device-width,user-scalable=yes, minimum-scale=0.4, initial-scale=0.8,target-densitydpi=low-dpi" />
        <link rel="stylesheet" href="../../css/font.css">
        <link rel="stylesheet" href="../../css/xadmin.css">
        <link rel="stylesheet" href="../../lib/layui/css/layui.css">
        <script src="../../lib/layui/layui.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../js/xadmin.js"></script>
        <!--[if lt IE 9]>
        <script src="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
        <script src="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
        <![endif]-->
    </head>
<body>
    <!--导航栏开始-->
    <div class="x-nav">
          <span class="layui-breadcrumb">
            <a href="">首页</a>
            <a>
              <cite>导航元素</cite>
            </a>
          </span>
        <a class="layui-btn layui-btn-small" style="line-height:1.6em;margin-top:3px;float:right" onclick="location.reload()" title="刷新">
            <i class="layui-icon layui-icon-refresh" style="line-height:30px"></i>
        </a>
    </div>
    <!--导航栏结束-->
    <div class="layui-fluid">
        <div class="layui-row layui-col-space15">
            <div class="layui-col-md12">
                <div class="layui-card">
                    <!--搜索条件结束-->
                    <!--数据表格开始-->
                    <div class="layui-card-body">
                        <!-- <div style="width: 30%;"> -->
                        <table class="layui-hide" id="notice" lay-filter="notice" ></table>
                        <!-- </div> -->
                        <div style="display: none;" id="noticeBar">
                            <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
                            <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del"><i class="layui-icon"></i>删除</a>
                        </div>
                        <div style="display: none;" id="noticeToolBar">
                            <div class="layui-btn-container">
                                <button type="button" class="layui-btn layui-btn-sm" lay-event="add">增加</button>
<!--                                <button type="button" class="layui-btn layui-btn-sm" lay-event="getSelect">得到选中行</button>-->
                                <button type="button" class="layui-btn layui-btn-sm" lay-event="reloadTable">刷新表格</button>
                            </div>
                        </div>
                    </div>
                    <!--数据表格结束-->
                </div>
            </div>
        </div>
    </div>


</body>
    <script type="text/javascript" src="../../js/jquery.min.js"></script>
    <script type="text/javascript" src="../../js/app.js"></script>
    <script src="https://cdn.bootcss.com/moment.js/2.23.0/moment.min.js" type="text/javascript" charset="utf-8"></script>

    <script>
    layui.use(['jquery','layer','table','form'], function(){
        var $ = layui.jquery;
        var layer = layui.layer;
        var table = layui.table;
        var form = layui.form;
        var user = app.getUserGlobalInfo();


        var tableIns = table.render({
            elem: '#notice' //渲染的目标对象
            ,url:app.ServerUrl+'v1/feedback/selectNoticeByLauncherRoleId' //数据接口
            ,where: {launcherRoleId: user.roleId}
            ,method:'get'
            ,title:'notice' //数据导出标题
            ,toolbar: "#noticeToolBar" //表头的工具条
            ,defaultToolbar:['filter','print']
            ,cellMinWidth: 100 //设置列的最小默认宽度
            ,done: function(res,curr,count){

            }
            ,totalRow: true //开启合并行
            ,page:true  //是否开启分页
            ,limit:10  //设置每页显示的条数
            ,limits: [3,5,10]
            ,loading: true  //是否显示加载条
            ,text:{
                none: '暂无相关数据' //默认：无数据。注：该属性为 layui 2.2.5 开始新增
            }
            ,parseData: function(res){ //res 即为原始返回的数据
                var result;
                if(this.page.curr){
                    result = res.objs[0].slice(this.limit*(this.page.curr-1),this.limit*this.page.curr);
                }else{
                    result = res.objs[0].slice(0,this.limit);
                }
                return {
                    "resultStatus":res.resultStatus,//解析状态码
                    "resultIns":res.resultIns, //解析数据状态信息
                    "count": res.objs[0].length, //解析数据长度
                    "data": result //解析数据列表
                };
            }
            ,response: {
                statusName: 'resultStatus',
                statusCode: 1,
                msgName: 'resultIns',
            }
            ,cols: [[ //列数据
                {type: 'checkbox', fixed: 'left'}
                ,{type: 'numbers',title:'序号'}
                // ,{field: 'launcher', title: '用户Id',  align:'center'}
                ,{field: 'username', title: '用户名',  align:'center'}
                ,{field: 'state', title: '公告等级', align:'center'}
                ,{field: 'launchTime', title: '时间', sort: true,  align:'center', templet: function (d) {
                        return app.getFormatDate(d.launchTime);
                    }}
                ,{field: 'noticeContext', title: '内容',align:'center'}
                ,{field: 'right', title: '操作',toolbar: '#noticeBar',  align: 'center',fixed:'right'}
            ]]
        });

        //监听头部工具栏事件
        table.on('toolbar(notice)', function(obj){
            switch(obj.event){
                case 'add':
                    layer.prompt({
                        formType: 2,
                        value: '请输入公告内容',
                        title: '新增公告',
                        area: ['800px', '350px'] //自定义文本域宽高
                    }, function(value, index){
                        $.ajax({
                            url: app.ServerUrl + 'v1/feedback/addNotice',
                            type: "post",
                            data: {
                                launcher: user.userId,
                                noticeContext: value
                            },
                            async: false,//true 异步请求（默认）；false 同步请求
                            dataType:"json",
                            // headers: {
                            //     "Authorization": "460bcdb0-b326-4d6d-ac99-232c83ba6d80"
                            // },
                            success:function (res) {
                                // console.log("成功");
                                //请求成功之后的操作，res是成功后的数据
                                if(res.resultStatus == 1){
                                    layer.alert("新增成功", {icon: 6});
                                }else{
                                    layer.alert("新增失败", {icon: 5});
                                }
                            },
                        });
                        layer.close(index);
                    });
                    break;
                case 'reloadTable': //异步刷新表格
                    tableIns.reload({
                        url: app.ServerUrl+'v1/feedback/selectNoticeByLauncherRoleId'
                    });
                    break;
                }
            });

        //监听行双击事件
        table.on('rowDouble(notice)', function(obj){
            layer.open({
                type: 1
                ,title: false //不显示标题栏
                ,closeBtn: false
                ,area: '400px;'
                ,shade: 0.8
                ,id: 'LAY_layuipro' //设定一个id，防止重复弹出
                ,btn: ['确定']
                ,btnAlign: 'c'
                ,moveType: 1 //拖拽模式，0或者1
                ,content: '\<\div style="padding: 50px; line-height: 22px;' +
                    ' background-color: #393D49; color: #fff; font-weight: 300;' +
                    'display:block;word-break: break-all;word-wrap: break-word;">'+obj.data.noticeContext+'\<\/div>'
                ,success: function () {
                    layer.close();
                }
            })
        });
        //监听行工具事件
        table.on('tool(notice)', function(obj){ //注：tool 是工具条事件名，notice 是 table 原始容器的属性 lay-filter="对应的值"
            var data = obj.data; //获得当前行数据
            var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
            var tr = obj.tr; //获得当前行 tr 的 DOM 对象（如果有的话）
            if(layEvent === 'del'){ //删除
                layer.confirm('真的删除公告么', function(){
                    $.ajax({
                        url:app.ServerUrl+'v1/feedback/deleteNoticeById',
                        type:"post",
                        data:{
                            noticeId: obj.data.noticeId,
                        },
                        async:false,//true 异步请求（默认）；false 同步请求
                        dataType:"json",
                        // headers: {
                        //     "Authorization": "460bcdb0-b326-4d6d-ac99-232c83ba6d80"
                        // },
                        success:function (res) {
                            //请求成功之后的操作，res是成功后的数据
                            if(res.resultStatus == 1){
                                layer.msg('已删除!',{icon:1,time:1000});
                            }else{
                                alert("删除失败！！！");
                            }
                        },
                        error:function (res) {
                            //请求失败之后的操作，res是失败后的数据
                            console.log(res)
                        },
                    });
                    obj.del(); //删除对应行（tr）的DOM结构，并更新缓存
                    //向服务端发送删除指令
                });
            } else if(layEvent === 'edit'){ //编辑
                layer.prompt({
                    formType: 2,
                    value: obj.data.noticeContext,
                    title: '请输入值',
                    area: ['800px', '350px'] //自定义文本域宽高
                }, function(value, index){
                    $.ajax({
                        url: app.ServerUrl + 'v1/feedback/updateNoticeById',
                        type: "post",
                        data: {
                            noticeId: obj.data.noticeId,
                            noticeContext: value
                        },
                        async: false,//true 异步请求（默认）；false 同步请求
                        dataType:"json",
                        // headers: {
                        //     "Authorization": "460bcdb0-b326-4d6d-ac99-232c83ba6d80"
                        // },
                        success:function (res) {
                            //请求成功之后的操作，res是成功后的数据
                            if(res.resultStatus == 1){
                                layer.alert("修改成功", {icon: 6});
                                tableIns.reload();
                            }else{
                                layer.alert("修改失败", {icon: 5});
                            }
                        },
                    });
                    layer.close(index);
                });
            }
        });
    });
</script>
</html>